<template>
	<view class="evaluation_box">
		<view class="evaluation_container">
			<view class="service_info">
				<view class="service_name">{{orderInfo.goodsName}}</view>
				<view class="service_info_content">
					<view class="service_duration">规格：{{orderInfo.goodsSkuServiceTime}}</view>
					<view class="service_pets">宠物数量：{{orderInfo.petNum}}</view>
				</view>
			</view>
			<view class="select_star_box">
				<view class="select_star_title">综合评分</view>
				<view>
					<image v-for="item in 5" :key="item" class="select_star_item" :src="getStarUrl(item)" @tap="getScore(item)"></image>
				</view>
			</view>
			<view class="evalutaion_description_box">
				<view class="description_title">
					<view class="description_title_name">服务评价</view>
					<view class="description_title_tips">请您对陪宠师的服务进行评价，300字以内。</view>
				</view>
				<view class="description_input_box">
					<textarea v-model="description" class="description_input" placeholder-class="description_input_placeholder" placeholder="输入评价" maxlength="300" />
				</view>
			</view>
			<view class="anonymous_box" @tap="selectAnonymousStatus">
				<view v-if="!isAnonymous" class="anonymous_selector"></view>
				<image v-else class="anonymous_selector anonymous_selector_picked" :src="`${url}icon-13.png`"></image>
				<view>匿名评价</view>
			</view>
		</view>
		<view class="evaluation_button" @tap="submit">提交</view>
	</view>
</template>

<script setup>
import { reactive, computed, ref } from 'vue';
import api from '@/api';
import { onLoad } from '@dcloudio/uni-app';

const score = ref(0);
const description = ref('');
const orderInfo = ref({});
let orderId = '';
let studioId = ''
let isSuperiorOrder = 0
const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const isAnonymous = ref(false);

onLoad((data) => {
	orderId = data.orderId
	studioId = data.studioId == 'undefined' ? '': data.studioId
	// isSuperiorOrder 1 总单 0 子单
	isSuperiorOrder = data.isSuperiorOrder
	getOrderInfo()
});

const getOrderInfo = async () => {
	const url = isSuperiorOrder == '0' ? `/mall/order/order-detail/dayOrderDetail` : `/mall/order/detail/${orderId}`
	const params = {
				id: orderId,
				studioId: studioId
			}
	const { data } = await api({
		method: 'get',
		url,
		data: isSuperiorOrder == '0' ? params: {}
	});
	orderInfo.value = data;
};
const getStarUrl = (num) => {
	return score.value >= num ? `${url.value}icon-89.png` : `${url.value}icon-90.png`;
};
const getScore = (num) => {
	score.value = num;
};
const selectAnonymousStatus = () => {
	isAnonymous.value = !isAnonymous.value;
};
const submit = async () => {
	if (!validateFormInfo()) return;
	const res = await api({
		method: 'POST',
		url: `/mall/order/assess/submitAssess`,
		data: {
			orderId: orderId,
			content: description.value,
			studioId: studioId,
			ifAnonymous: isAnonymous.value == true ? 0 : 1,
			userId: orderInfo.value.userId,
			comprehensiveEvaluation: score.value
		}
	});
	if (res.code != 0) return false;

	uni.showToast({
		title: '评价成功'
	});

	uni.navigateTo({
		url: '/pages/petsOrder/petsList/index?orderType=0'
	});
};
const validateFormInfo = () => {
	const validationList = [isScoreEmpty, isDescriptionEmpty];
	return validationList.every((fn) => {
		if (fn instanceof Function) {
			return fn();
		}
	});
};
const isScoreEmpty = () => {
	if (score.value == 0) {
		uni.showToast({
			icon: 'none',
			title: '您还未选择星级评分'
		});
		return false;
	}
	return true;
};

const isDescriptionEmpty = () => {
	if (!description.value instanceof String) return false;
	const result = description.value.trim();
	if (result.length < 5) {
		uni.showToast({
			icon: 'none',
			title: '请至少写5个字的评价'
		});
		return false;
	}
	return true;
};
</script>

<style lang="scss" scoped>
.evaluation_box {
	padding: 34rpx 32rpx;
	padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
	background-color: #f9f6f6;

	.evaluation_container {
		padding: 40rpx 32rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.service_info {
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.service_name {
				font-weight: bold;
				font-size: 32rpx;
				color: #1a1a1a;
				margin-bottom: 16rpx;
			}
			.service_info_content {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #7c807f;

				.service_pets {
					margin-left: 24rpx;
					padding-left: 24rpx;
					border-left: 1rpx solid #cacccc;
				}
			}
		}

		.select_star_box {
			margin: 40rpx 0 64rpx;

			.select_star_title {
				font-weight: bold;
				font-size: 32rpx;
				color: #1a1a1a;
				margin-bottom: 40rpx;
			}
			.select_star_item {
				width: 64rpx;
				height: 64rpx;
				margin-right: 40rpx;
			}
		}
		.evalutaion_description_box {
			margin-bottom: 40rpx;

			.description_title {
				.description_title_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1a1a1a;
					margin-bottom: 16rpx;
				}
				.description_title_tips {
					font-size: 26rpx;
					color: #7c807f;
					margin-bottom: 32rpx;
				}
			}
			.description_input_box {
				padding: 32rpx;
				background: #f5f6f7;
				height: 622rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.description_input {
					font-size: 30rpx;
					color: #1a1a1a;
					height: 100%;
				}
				::v-deep .description_input_placeholder {
					font-weight: 400;
					font-size: 30rpx;
				}
			}
		}

		.anonymous_box {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #1b2120;

			.anonymous_selector {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 2rpx solid #000000;
				margin-right: 16rpx;
				box-sizing: border-box;
			}
			.anonymous_selector_picked {
				border: none;
			}
		}
	}

	.evaluation_button {
		height: 88rpx;
		border-radius: 88rpx;
		background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #ffffff;
		box-sizing: border-box;
		margin-top: 24rpx;
	}
}
</style>
